<template>
    <div class="monitoring-entry-table">
        <el-table :data="list" size="mini" @row-click="rowClick" height="200px" border v-loading="loadingAll">
            <el-table-column show-overflow-tooltip prop="calculateValue" label="实际值"></el-table-column>
            <el-table-column show-overflow-tooltip prop="thresholdValue" label="设置值">
                <template slot-scope="scope">
                    <span>
                        {{ scope.row.calculateValue != null ? CompareDirection[scope.row.compareType] + '' + scope.row.thresholdValue : '--' }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="calLogicShow" label="计算逻辑" min-width="160" show-overflow-tooltip> </el-table-column>
            <el-table-column show-overflow-tooltip prop="thresholdType" label="触警状态">
                <template slot-scope="scope">
                    <el-tooltip v-if="scope.row.thresholdType === '4'" class="item" effect="dark" :content="scope.row.errorMessage" placement="top">
                        <!-- <span
                            :style="{
                                display: 'inline-block',
                                padding: '2px 4px',
                                borderRadius: '2px',
                                backgroundColor: typeStype[scope.row.thresholdType].color,
                                color: typeStype[scope.row.thresholdType].fontColor,
                            }"
                            >{{ typeStype[scope.row.thresholdType].name }}
                        </span> -->
                        <StatusTag :code="scope.row.thresholdType"></StatusTag>
                    </el-tooltip>
                    <!-- <span
                        v-else
                        :style="{
                            display: 'inline-block',
                            padding: '2px',
                            borderRadius: '2px',
                            backgroundColor: typeStype[scope.row.thresholdType].color,
                            color: typeStype[scope.row.thresholdType].fontColor,
                        }"
                        >{{ typeStype[scope.row.thresholdType].name }}
                    </span> -->
                    <StatusTag v-else :code="scope.row.thresholdType"></StatusTag>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="fundCode" label="触警基金代码">
                <template slot-scope="scope">
                    <!-- <el-popover v-if="scope.row.fundCodes && scope.row.fundCodes.length > 1" placement="right" trigger="hover" :visible-arrow="false">
                        <div style="padding: 0 10px 10px 0" slot v-for="(ele, index) in scope.row.fundCodes" :key="index">
                            {{ ele }}
                        </div>
                        <el-tag slot="reference" style="background: #f1e9e2; color: #bf9181" size="small">
                            {{ getObjectLength(scope.row.fundCodes) + '个产品' }}
                        </el-tag>
                    </el-popover> -->

                    <span v-if="scope.row.fundCodes && scope.row.fundCodes.length > 1">无</span>
                    <!-- <span v-else-if="scope.row.fundCodes && scope.row.fundCodes.length === 1">无</span> -->
                    <span v-else>{{ scope.row.fundCode }}</span>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="fundNameSt" label="触警基金名称">
                <template slot-scope="scope">
                    <!-- <el-popover v-if="scope.row.fundNames && scope.row.fundNames.length > 1" placement="right" trigger="hover" :visible-arrow="false">
                        <div style="padding: 0 10px 10px 0" slot v-for="(ele, index) in scope.row.fundNames" :key="index">
                            {{ ele }}
                        </div>
                        <el-tag slot="reference" style="background: #f1e9e2; color: #bf9181" size="small">
                            {{ getObjectLength(scope.row.fundNames) + '个产品' }}
                        </el-tag>
                    </el-popover> -->
                    <span v-if="scope.row.fundNames && scope.row.fundNames.length > 1">无</span>
                    <!-- <span v-else-if="scope.row.fundNames && scope.row.fundNames.length === 1">无</span> -->
                    <span v-else>{{ scope.row.fundNameSt }}</span>
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="stockCode" label="触警证券代码"></el-table-column>
            <el-table-column show-overflow-tooltip prop="stockNameSt" label="触警证券简称"></el-table-column>
            <el-table-column show-overflow-tooltip prop="issueInfoName" label="发行人"></el-table-column>
        </el-table>
        <RiskPagination :paging="paging" @page-change="getTableData"></RiskPagination>

        <el-table
            :data="riskBrandDetail"
            @expand-change="expandChange"
            size="mini"
            row-key="brandResultId"
            :expand-row-keys="expandKeys"
            height="calc(50vh - 80px)"
            style="margin-top: 10px"
            border
            v-loading="loadingDetail"
        >
            <el-table-column show-overflow-tooltip type="expand">
                <template slot-scope="scope">
                    <ItemRealTimeStockDetail :data="scope.row.childList" />
                </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip prop="branchKey" label="静态分支编码"></el-table-column>
            <el-table-column show-overflow-tooltip prop="branchName" label="分支名称"></el-table-column>
            <el-table-column show-overflow-tooltip prop="branchNo" label="分支序号"></el-table-column>
            <el-table-column show-overflow-tooltip prop="branchValue" label="分支计算结果">
                <template #default="{ row }">
                    <span>{{ row.branchValue != undefined ? getFormat(row.branchValue) : '' }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
import { Component, Prop, PropSync, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil from '@/utils/diction-const-util';
import { numberFormat, numberFormatXDAY, getConfigItem } from '@/utils/tools';
import ItemRealTimeStockDetail from './item-real-time-stock-detail.vue';
import { getEntryResultDetail, monitorDetailColumnCache } from './api/item-real-time-monitoring';
import StatusTag from '@/pages/risk-measure/components/status-tag.vue';
import { PageVO } from '@/common/vo';
import RiskPagination from '@/common/components/risk-pagination.vue';

@Component({ name: 'ItemRealTimeMonitoringEntryTable', components: { ItemRealTimeStockDetail, StatusTag, RiskPagination } })
export default class ItemRealTimeMonitoringEntryTable extends Vue {
    numberFormat = numberFormat;
    numberFormatXDAY = numberFormatXDAY;
    WEB_DOCKING = getConfigItem('WEB_DOCKING');
    // @PropSync('visible') syncVisible: boolean;
    // @Prop({ default: '' }) entryInfo: string;
    @Prop({ default: () => {} }) entryInfo: any;
    list: any[] = [];
    private visibleTemp = false;

    private CompareDirection = {
        '0': '>',
        '1': '<',
        '2': '>=',
        '3': '<=',
        '4': '=',
        '5': '<>',
        '6': ' ',
    };
    private typeStype = {
        '0': {
            name: '合规',
            color: '#95f204',
            fontColor: '#333333',
        },
        '1': {
            name: '警告',
            color: '#f59a23',
            fontColor: '#ffffff',
        },
        '2': {
            name: '送审',
            color: '#ffff00',
            fontColor: '#333333',
        },
        '3': {
            name: '禁止',
            color: '#d9001b',
            fontColor: '#ffffff',
        },
        '4': {
            name: '错误',
            color: '#333333',
            fontColor: '#ffffff',
        },
    };
    private ThresholdTypeColor = DictionConstUtil.ThresholdTypeColor;

    private riskBrandDetail = [];

    private loadingAll: boolean = false;

    private loadingDetail: boolean = false;

    private expandKeys = [];

    paging: PageVO = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
    };

    getFormat(val) {
        if (this.WEB_DOCKING === 'CIBFUND') {
            return numberFormatXDAY(val);
        }
        return numberFormat(val);
    }

    // @Watch('visible')
    // onWatchVisible(value) {
    //     if (value !== this.visibleTemp) {
    //         this.visibleTemp = value;
    //         this.riskBrandDetail = [];
    //     }
    // }
    mounted() {
        // @Watch('rendCount')
        // onWatchVisible(value) {
        // if (value !== this.visibleTemp) {
        //     this.visibleTemp = value;
        //     this.riskBrandDetail = [];
        // }
        // this.riskBrandDetail = [];
        // }

        this.getTableData();
    }

    getTableData() {
        getEntryResultDetail({
            entryCode: this.entryInfo.entryCode,
            // originalAccoutId: '0',
            fundGrCodes: this.entryInfo.fundGrCodes,
            fundCodes: this.entryInfo.fundCodes,
            resultId: this.entryInfo.row?.resultId,
            paging: this.paging,
        }).then((res: any) => {
            this.list = res.list;
            this.paging.total = res.total;
        });
    }

    // 点击行
    rowClick(row) {
        this.riskBrandDetail = row.riskBrandDetail;
    }

    // 展开下表的行
    expandChange(row, data) {
        this.riskBrandDetail.forEach((item, index) => {
            if (item.brandResultId === row.brandResultId) {
                if (item.childList == undefined) {
                    // 当前分支明细没有数据，要从后台查数据了
                    this.loadingDetail = true;
                    monitorDetailColumnCache({ brandResultId: row.brandResultId, entryCode: row.entryCode })
                        .then((result: any) => {
                            item.childList = result || [];
                            this.expandKeys.push(row.brandResultId);
                        })
                        .finally(() => {
                            this.loadingDetail = false;
                        });
                }
                return;
            }
        });
    }
}
</script>
